<template>
	<view class="mian">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<Header color="#fff" title="镇妖塔"></Header>
		<view class="top_shu">
			<view class="left_ceng">
				<image src="http://img.cpgm.cc/panda/static/index/1.png" class="bao" mode="widthFix"></image>
				<view class="jiangli">
					层数奖励：<text>{{cengBao}}水晶</text>
				</view>
				<view class="lqsj button">
					<u-button :plain="true" class="btn_b" :hair-line="false" hover-class="none" :throttle-time="1000"
						@click="liqu()">领取</u-button>
				</view>
			</view>
			<view class="rigth_t">
				<view @click="top_tress(1)" class="top_le">
					<image src="http://img.cpgm.cc/panda/static/zhenyaota/ben.png" class="img_left" mode="widthFix">
					</image>
					<view class="jilu">
						闯关记录
					</view>
				</view>
				<view @click="top_tress(2)" class="top_le">
					<image src="http://img.cpgm.cc/panda/static/zhenyaota/bianju.png" class="img_left"
						mode="widthFix"></image>
					<view class="jilu">
						玩法说明
					</view>
				</view>
				<view @click="top_tress(3)" class="top_le">
					<image src="http://img.cpgm.cc/panda/static/zhenyaota/jiang.png" class="img_left" mode="widthFix">
					</image>
					<view class="jilu">
						排行榜
					</view>
				</view>
			</view>
		</view>
		<!-- 下面的boss -->
		<image :src="bossList[inds].img" class="bos_img" mode="widthFix"></image>
		<view class="boss">
			<!-- /第几层 -->
			<view class="ceng">
				<view class="cen">
					第{{tower+1}}层
				</view>
			</view>
			<!-- /boss -->
			<view class="ceng_bos">
				守塔boss：<text>{{bossList[inds].name}}</text>
			</view>
			<!-- 水晶 -->
			<image src="http://img.cpgm.cc/panda/static/home/dio.png" class="shuij" mode="widthFix"></image>
			<!-- /通关奖励 -->
			<view class="tgjl">
				通关奖励 ：<text>{{tower+1}}</text>水晶
			</view>
			<!-- /开始闯关 -->
			<view @click="waiChuang" class="btn button">
				开始闯关
			</view>
		</view>
		<!-- vs -->
		<u-mask :show="popshow">
			<view class="p_drawer" :class="[popshow ? 'drawer-show' : 'drawer-visible']">
				<image class="pkimg" src="http://img.cpgm.cc/panda/static/zhenyaota/huaban.png" mode="widthFix" />
				<view class="close">
					<image @click="popshow = false" src="http://img.cpgm.cc/panda/static/index/close.png"
						mode="widthFix" />
				</view>
				<scroll-view lower-threshold="50" @scrolltolower="scrolltolower" scroll-y class="ranklist">
					<view class="r_item" :class="[index==0?'r_item1':index==1?'r_item2':index==2?'r_item3':'r_item']"
						v-for="(item, index) in list" :key="index">
						<view class="flex">
							<view class="lv">
								<image v-if="index < 3"
									:src="index == 0 ? 'http://img.cpgm.cc/panda/static/zhenyaota/1.png' : index == 1 ? 'http://img.cpgm.cc/panda/static/zhenyaota/2.png' : 'http://img.cpgm.cc/panda/static/zhenyaota/3.png'"
									mode="widthFix" />
								<text v-else>{{ index + 1 }}</text>
							</view>
							<view class="header" @click="seeinfo(item)">
								<image
									:src="item.wx_img ? item.wx_img : 'http://img.cpgm.cc/panda/static/login/logo.png'"
									mode="widthFix" />
							</view>
							<text class="phone"
								:class="[index == 0 ? 'phone1' : index == 1 ? 'phone2' :index==2? 'phone3':'phone']">{{ !!item.wx_nickname ? item.wx_nickname : '潮玩新人' }}
							</text>
						</view>
						<view class="right">
							<text class="top">{{item.tower}}层</text>
							<text class="bot">水晶奖励：+{{item.crystal}}</text>
						</view>
					</view>
					<view v-if="list.length==0" class="zanwu">
						<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" class="zaneu_img"
							mode="widthFix"></image>
						<view class="">
							没有数据哦~
						</view>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
				</scroll-view>
			</view>
		</u-mask>
		<u-popup mode="bottom" border-radius="56" v-model="show">
			<view class="waiBox">
				<view class="top_ti">
					<view class="duoDetl">
						参与闯关({{userinfo.bt_nums}}/10)<br>
						<text>剩余闯关次数：{{(10-Number(userinfo.bt_nums))}}次</text>
					</view>
					<image src="http://img.cpgm.cc/panda/static/duoBao/cah.png" @click="cha3" class="chah"
						mode="widthFix"></image>
				</view>
				<view class="bot">
					开始闯关层数：{{tower+1}}层
				</view>
				<view class="bot">
					<text>闯关成功可获：</text>
					<image src="http://img.cpgm.cc/panda/static/home/dio.png" class="baoshi" mode="widthFix"></image>
					<text class="num">{{tower+1}}</text>
				</view>
				<view class="bot">
					<text>本层所需拥有水晶：</text>
					<image src="http://img.cpgm.cc/panda/static/home/dio.png" class="baoshi" mode="widthFix"></image>
					<text class="num">{{(tower+1)*50}}</text>
				</view>

				<!-- 战力 -->
				<view class="zhan">
					根据你当前战力，闯关有{{nums}}%机率成功
				</view>
				<!-- 下面的按钮 -->
				<view class="btn_cg button">
					<u-button :plain="true" @click="gouChuang" class="btn_b" :hair-line="false" hover-class="none"
						:throttle-time="1000">开始闯关</u-button>

				</view>
			</view>
		</u-popup>
		<u-mask :show="show2">
			<view class="warps">
				<image src="http://img.cpgm.cc/panda/static/zhenyaota/chengg.png" class="cheng" mode="widthFix">
				</image>
				<view class="bottom">
					<view class="top_name">
						获得<text>{{towerAsync}}</text>水晶
					</view>
					<view class="bg_wu">
						<image src="http://img.cpgm.cc/panda/static/index/1.png" class="baoshi" mode="widthFix">
						</image>
					</view>
					<!-- 手下 -->
					<view @click="shouxia" class="shou button">
						收下
					</view>
				</view>
			</view>
		</u-mask>
		<u-mask :show="show3">
			<view class="warps2">
				<image src="http://img.cpgm.cc/panda/static/zhenyaota/shib.png" class="cheng" mode="widthFix"></image>
				<view class="bottom">
					<view class="shiba">
						很遗憾闯塔失败<br>
						您的战力有待提升<br>
						请再接再厉
					</view>
					<!-- 手下 -->
					<view @click="fanhui" class="shou button">
						返回
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		bossList
	} from '@/utils/toos.js'
	export default {
		data() {
			return {
				towerAsync: 0,
				cengBao: 0,
				inds: 0,
				show2: false, //闯塔成功
				show3: false, //闯塔失败
				show: false,
				stat: 1,
				tower: 0,
				popshow: false,
				wfshow: false,
				tablist: [],
				list: [],
				bossList: bossList,
				userinfo: uni.getStorageSync('userinfo'),
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '没有更多了',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				page: 1,
				max_page: 1,
			}
		},
		computed: {
			nums() {
				let n = Number(this.userinfo.bt_rate * 100).toFixed(2)
				console.log(n<10);
				if (n >= 100) {
					return 100
				} else if (n < 10) {
					return 10
				} else {
					return n
				}
			}
		},
		onShow() {
			console.log(bossList[this.inds].img, '123');
			// this.bossList = bossList
			this.userinfos()
		},
		onLoad() {
			this.paiList()
		},
		methods: {
			// 点击开始闯关
			async gouChuang() {
				let n = await this.$http.index.tower()
				if (n.code == 1 && n.crystal) {
					this.towerAsync = n.crystal
					this.show2 = true
					this.show = false
					this.userinfos()
				} else if (n.code == -10) {
					this.show = false
					this.show3 = true
					this.userinfos()
				} else {
					this.$msg(n.msg)
					this.userinfos()
				}
			},
			// 点击领取奖励
			async liqu() {
				let n = await this.$http.index.getTowerReward()
				this.$msg(n.msg)
				if (n.code == 1) {
					this.userinfos()
				}
			},
			// 失败点击返回
			fanhui() {
				this.show3 = false
			},
			// 成功点击收下
			shouxia() {
				this.show2 = false
			},
			top_tress(num) {
				if (num == 3) {
					// /说明点击的是排行榜
					
					this.popshow = true
				} else if (num == 1) {
					this.$p.navto('/pages/zhenyaota/zhenDetil')
				} else if (num == 2) {
					this.$p.navto('/pages/zhenyaota/zhenJiang')
				}
			},
			scrolltolower() {
				if (!this.max_page) {
					return
				}
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				} else {
					this.status = 'loading';
					this.page = ++this.page;
					this.paiList();
					setTimeout(() => {
						if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}
			},

			async paiList() {
				let res = await this.$http.index.towerRank({
					page: this.page
				})
				this.list = [...this.list, ...res.data];
				this.max_page = res.page;
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				}

			},
			cha3() {
				this.show = false
			},
			// 点击外层的开始闯关
			waiChuang() {
				this.show = true
			},
			// 请求userinfo
			userinfos() {
				this.$getUserInfo.getUserInfo((res) => {
					this.userinfo = res.data
					this.tower = res.data.tower
					// 处理第几层
					if (this.tower < 10) {
						if (this.tower == 10) {
							this.inds = 9
						} else {

							this.inds = res.data.tower
						}
					} else {
						let n = String(res.data.tower / 10)
						if (!n.split('.')[1]) {
							this.inds = 0
						} else {
							this.inds = n.split('.')[1]
						}
					}
					// 处理宝石
					if (res.data.tower < 300) {
						this.cengBao = 0
					} else if (res.data.tower < 400) {
						this.cengBao = 150
					} else if (res.data.tower < 500) {
						this.cengBao = 200
					} else if (res.data.tower < 600) {
						this.cengBao = 250
					} else if (res.data.tower < 700) {
						this.cengBao = 300
					} else if (res.data.tower < 800) {
						this.cengBao = 350
					} else if (res.data.tower < 900) {
						this.cengBao = 400
					} else if (res.data.tower < 1000) {
						this.cengBao = 450
					} else if (res.data.tower >= 1000) {
						this.cengBao = 500
					}
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.zanwu {
		font-size: 14px;
		color: #A1A1A1;
		font-weight: 500;
		// margin-top: 20%;
		text-align: center;

		.zaneu_img {
			width: 70%;
		}
	}

	.warps2 {
		width: 90%;
		// height: 200px;
		// background-color: #fff;
		margin: 0 auto;
		margin-top: 70%;

		.bottom {
			width: 100%;
			background: linear-gradient(90deg, rgba(90, 140, 189, 0) 0%, rgba(47, 118, 188, 0.7) 27%, rgba(93, 179, 229, 0.66) 51%, rgba(90, 140, 189, 0.7) 77%, rgba(55, 78, 91, 0) 100%);
			padding: 20px;
			margin-top: -4px;

			.shiba {
				text-align: center;
				font-size: 14px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				margin-bottom: 15px;
			}

			.shou {
				width: 87px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				font-size: 13px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #234C9D;
				background: linear-gradient(180deg, #ADCFFA 0%, #F1F9FE 100%);
				box-shadow: 0px 1px 5px 0px rgba(39, 96, 207, 1);
				border-radius: 4px;
				margin: 0 auto;
			}

			.bg_wu {
				width: 58px;
				height: 58px;
				background: url('http://img.cpgm.cc/panda/static/zhenyaota/bg.png') no-repeat;
				background-size: 100% 100%;
				margin-left: 50%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20px;
				margin-bottom: 20px;

				.baoshi {
					width: 50px;
					height: 50px;
				}
			}

			.top_name {

				text-align: center;
				font-size: 14px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 10px;


				text {
					color: #00FF56;

				}
			}
		}

		.cheng {
			width: 80%;
			height: 100px;
			margin-left: 50%;
			transform: translateX(-50%);
		}
	}

	.warps {
		width: 90%;
		// height: 200px;
		// background-color: #fff;
		margin: 0 auto;
		margin-top: 70%;

		.bottom {
			width: 100%;
			background: linear-gradient(90deg, rgba(133, 108, 63, 0) 0%, #514b36 27%, #655f4c 51%, #4b4532 77%, rgba(91, 78, 55, 0) 100%);
			padding: 20px;
			margin-top: -4px;

			.shou {
				width: 87px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				font-size: 13px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #9D3A23;
				background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
				box-shadow: 0px 1px 5px 0px rgba(157, 58, 35, 1);
				border-radius: 4px;
				margin: 0 auto;
			}

			.bg_wu {
				width: 58px;
				height: 58px;
				background: url('http://img.cpgm.cc/panda/static/zhenyaota/bg.png') no-repeat;
				background-size: 100% 100%;
				margin-left: 50%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20px;
				margin-bottom: 20px;

				.baoshi {
					width: 50px;
					height: 50px;
				}
			}

			.top_name {

				text-align: center;
				font-size: 14px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 10px;


				text {
					color: #00FF56;

				}
			}
		}

		.cheng {
			width: 80%;
			height: 100px;
			margin-left: 50%;
			transform: translateX(-50%);
		}
	}

	.bos_img {
		position: absolute;
		top: 21%;
		width: 75%;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.boss {
		width: 100%;
		position: absolute;
		top: 55%;
		max-height: 40%;
		overflow-y: auto;

		.btn {
			width: 85%;
			height: 51px;
			line-height: 50px;
			text-align: center;
			margin: 0 auto;
			background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
			box-shadow: 0px 1px 5px 0px rgba(157, 58, 35, 1);
			border-radius: 5px;
			font-size: 16px;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #9D3A23;
			margin-top: 30px;
		}

		.tgjl {
			text-align: center;
			margin-top: 20px;
			font-size: 12px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;

			text {
				color: #48FF00;
			}
		}

		.shuij {
			width: 15%;
			margin-top: 20px;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.ceng_bos {
			width: 100%;
			padding: 15px;
			text-align: center;
			text-align: center;
			background: rgba(0, 0, 0, 0.3);
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FEE1C3;

			text {
				color: #48FF00;
			}
		}

		.ceng {
			margin-top: 20px;
			width: 100%;
			padding: 5px;
			text-align: center;
			background: linear-gradient(270deg, rgba(255, 242, 227, 0) 0%, #7d7c7c 54%, rgba(254, 225, 195, 0) 100%);
			// opacity: 0.3;

			.cen {
				margin: 0 auto;
				font-size: 15px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #f0d6bc;
			}
		}


	}

	.top_shu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 15px;

		.left_ceng {
			padding: 5px;
			background: #34314C;
			border-radius: 2px;
			display: flex;
			align-items: center;

			.bao {
				width: 21px;
				height: 19px;
				margin-right: 5px;
			}

			.lqsj {
				width: 35px;
				height: 20px;
				background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
				box-shadow: 0px 0px 0px 0px rgba(157, 58, 35, 1);
				border-radius: 2px;
				font-size: 11px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #9D3A23;
				line-height: 20px;
				text-align: center;
				zoom: 0.9;

				.btn_b {
					font-size: 11px;
					font-family: SourceHanSansCN-Bold, SourceHanSansCN;
					font-weight: bold;
					color: #9D3A23;
					line-height: 20px;
					text-align: center;
					// zoom: 0.9;
				}
			}

			.jiangli {
				font-size: 9px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
				margin-right: 15px;
				zoom: 0.85;

				text {
					color: #00FF56;
				}
			}
		}

		.rigth_t {
			display: flex;
		}

		.top_le {
			margin-right: 15px;
			text-align: center;

			.img_left {
				width: 19px;
				height: 20px;
			}

			.jilu {
				font-size: 9px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
				zoom: 0.8;
			}
		}
	}

	.mian {
		height: 100vh;
		position: relative;
		background: url('http://img.cpgm.cc/panda/static/zhenyaota/beij.png') no-repeat;
		background-size: 100% 100%;
	}




	//复制过来的

	// pop弹窗
	.popbox {
		background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
		height: 300px;
		padding: 15px;
	}

	.pkimg {
		width: 70%;
		position: absolute;
		top: 0;
		transform: translateY(-100%);
		left: 0;
	}

	.p_drawer {
		position: fixed;
		z-index: 10007;
		width: 100%;
		left: 0;
		bottom: -60vh;
		background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
		height: 60vh;
		padding: 15px;
		border-radius: 20px 20px 0 0;
	}

	.ranklist {
		height: calc(50vh - 20px);
		padding: 0 0 10px 0;
	}

	.drawer-show {
		transform: translateY(-100%);
		transition: all 0.25s linear;
	}

	.drawer-visible {
		transition: all 0.25s linear;
		transform: translate3D(0px, 0px, 0px) !important;
	}

	.t_top {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}

	.active {
		background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%) !important;
	}

	.p_tab {
		flex: 1;
		display: flex;
		align-items: center;

		.tab_item {
			width: 28%;
			height: 35px;
			background: #FFFFFF;
			border-radius: 5px;
			border: 1px solid #FEE1C3;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 5px;
			color: #696969;
		}
	}

	.close {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 25px;
		}
	}

	.p_right {
		display: flex;
		align-items: center;
		margin-left: 20px;

		image {
			width: 18px;
			margin-right: 5px;
		}

		text {
			color: #239D4C;
			font-size: 12px;
			text-decoration: underline;
		}
	}


	.ranklist {}

	.r_item {
		width: 100%;
		padding: 20px 12px;
		background: #FFF9F3;
		box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8px 0;
	}

	.r_item1 {
		width: 100%;
		padding: 20px 12px;
		background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
		box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8px 0;
	}

	.r_item2 {
		width: 100%;
		padding: 20px 12px;
		background: linear-gradient(180deg, #C6DEFF 0%, #E7F2FF 100%);
		box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8px 0;
	}

	.r_item3 {
		width: 100%;
		padding: 20px 12px;
		background: linear-gradient(180deg, #FFDECB 0%, #FFF2E2 100%);
		box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8px 0;
	}

	.flex {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.lv {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 19px;
		margin-right: 15px;

		image {
			width: 100%;
		}

		text {
			font-size: 20px;
			color: #343434;
			font-weight: 600;
			width: 100%;
			text-align: center;
		}
	}

	.phone {
		// width: 110px;
		// white-space: nowrap;/*不允许换行*/
		// overflow: hidden;/*超出隐藏*/
		// text-overflow: ellipsis;/*文本超出三点代替*/
		color: #343434;
		font-size: 13px;
		font-weight: 600;
	}

	.phone1 {
		color: #BF7A1C;
		font-size: 13px;
		font-weight: 600;
	}

	.phone2 {
		color: #6276CE;
		font-size: 13px;
		font-weight: 600;
	}

	.phone3 {
		color: #A63414;
		font-size: 13px;
		font-weight: 600;
	}

	.waiBox {
		background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
		padding: 25px;

		.btn_cg {
			width: 70%;
			height: 45px;
			background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
			border-radius: 23px;
			font-size: 14px;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #000000;
			line-height: 45px;
			text-align: center;
			margin: 0px auto;
			margin-top: 50px;

			.btn_b {
				width: 100%;
				height: 100%;
				color: #000000;
				line-height: 45px;
				font-size: 14px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				text-align: center;
				margin: 0px auto;
			}
		}

		.zhan {
			font-size: 12px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #696969;
			margin-top: 15px;
		}

		.bot {
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #343434;
			margin: 5px 0;
			display: flex;
			align-items: center;

			.baoshi {
				width: 14px;
				height: 13px;
				margin: 0px 5px;
			}

			.num {
				color: #239D4C;
			}
		}

		.top_ti {
			// text-align: center;
			position: relative;
			height: 50px;
			width: 100%;

			.chah {
				position: absolute;
				width: 25px;
				height: 25px;
				top: 0px;
				right: 0px;
			}

			.duoDetl {
				font-size: 20px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #343434;

				text {
					font-size: 12px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #343434;
				}
			}

			.qiNum {
				font-size: 11px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #343434;
			}
		}
	}

	.right {
		display: flex;
		flex-direction: column;
		align-items: end;

		.top {
			font-size: 11px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #343434;
		}

		.bot {
			font-size: 11px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FC544C;
			margin-top: 5px;
		}

		text {
			color: #343434;
			font-size: 12px;
		}
	}

	.header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10px;

		image {
			border-radius: 6px;
			width: 28px;
			height: 28px;

		}
	}

	button {
		background: transparent !important;
	}
</style>